<template>
  <div class="header">
    <h1>我是Header</h1>
    <p>Count的值是{{ count }}</p>
    <p>价格是{{ price }}</p>
    <button @click="increment">count++</button>
    <!-- 没地方传参数所以调用传参 最后传一个对象多次传参 -->
    <!-- <button @click="incrementN(5)">count+N</button> -->
    <button @click="incrementN({ n: 5, type: 'add' })">count+N</button>
    <button @click="decrement">count--</button>
    <button @click="decrement">count--</button>
    <button @click="incrementWait">等一等在++</button>
    <button @click="incrementNWait({ n: 5, type: 'add' })">等一等在+N</button>
    <button @click="getMovie">获取请求数据</button>
    <!-- <button @click="filterMovie">getters细化State数据</button> -->
    <ul>
      <li v-for="(item, index) in movieList" :key="index">
        {{ item.albumName }}
      </li>
    </ul>
    <hr />
    <h1>过滤后的</h1>
    <ul>
      <li v-for="(item, index) in filterMovie" :key="index">
        {{ item.albumName }}
      </li>
    </ul>
    <h1>自定义过滤后的</h1>
    <ul>
      <li v-for="(item, index) in diyfilterMovie" :key="index">
        {{ item.albumName }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
export default {
  name: "Header",
  computed: {
    //展开对象 得到许多计算属性函数
    ...mapState(["count", "price", "movieList"]),
    //得到getter细化的state
    ...mapGetters(["filterMovie"]),
    diyfilterMovie() {
      return this.$store.getters.diyfilterMovie({start:5, end:6});
    },
    //解决模块化之后不能传参
    // diyfilterMovie() {
    //   return this.$store.getters["count/diyfilterMovie"]({ start: 2, end: 4 });
    // },
  },
  mounted() {
    console.log(this);
  },
  methods: {
    // increment(){
    //   //对mutati上的事件进行提交
    //   this.$store.commit("increment")
    // },
    // incrementN(){
    //    this.$store.commit("incrementN",5)
    // },
    // decrement(){
    //   //对mutati上的事件进行提交
    //   this.$store.commit("decrement")
    // }
    //vue提供简写
    ...mapMutations(["increment", "decrement", "incrementN"]),
    ...mapActions(["incrementWait", "incrementNWait", "getMovie"]),

    // incrementWait() {
    //   //先dispatch分发处理后去mutation中commit事件
    //   this.$store.dispatch("incrementWait");
    //   // this.$store.commit("incrementWait")
    //   //因为我们要先分发action,所以分发action使用$store.dispatch方法
    // },
    // incrementNWait() {
    //   this.$store.dispatch("incrementNWait", { n: 5, type: "add" });
    // },
    // getMovie() {
    //   this.$store.dispatch("getMovie");
    // },
  },
};
</script>

<style scoped>
.header {
  margin: 30px;
  background: yellowgreen;
}
</style>